<template>
	<view>
		<view class="top-title defalut-bg padding6">
			<view class="left-title">维修设备信息</view>
			<view class="status"
				:class="[dataInfo.repairStatus==1||dataInfo.repairStatus==3?'title-dyz':dataInfo.repairStatus==2||dataInfo.repairStatus==5?'title-ongoing':dataInfo.repairStatus==9||dataInfo.repairStatus==4?'title-close':'title-close']">
				{{dataInfo.repairStatus==1?'待维修':dataInfo.repairStatus==2?'维修中':dataInfo.repairStatus==3?'待验证':dataInfo.repairStatus==5?'维修完成':dataInfo.repairStatus==9?'维修关闭':'关闭-待验证'}}
			</view>
		</view>
		<view class="detail-title white-bg detail-title-border">
			<view class="left-title">设备名称</view>
			<view class="right-title">{{dataInfo.deviceName}}</view>
		</view>
		<view class="detail-title white-bg detail-title-border">
			<view class="left-title">设备编号</view>
			<view class="right-title">{{dataInfo.deviceNum}}</view>
		</view>
		<view class="detail-title white-bg">
			<view class="left-title">设备型号</view>
			<view class="right-title">{{dataInfo.deviceModelName}}</view>
		</view>

		<view class="detail-title2">
			报修信息
		</view>
		<view class="gz-desc detail-title-border">
			<view class="title">故障描述</view>
			<view class="desc-reason2">{{dataInfo.description}}</view>
		</view>
		<view class="gz-icon1 padding7" v-if="videoList.length>0||imgList.length>0">
			<view class="title">故障照片</view>
			<view class="icon-list">

				<image @tap="previewImage(v,imgList)" v-for="(v,index) in imgList" :src="v"></image>
				<video v-for="(v,index) in videoList" :src="v"></video>
			</view>
		</view>
		<view class="detail-title detail-title-border">
			<view class="left-title">报修人</view>
			<view class="right-title">{{dataInfo.createUserName}}</view>
		</view>
		<view class="detail-title detail-title-border">
			<view class="left-title">报修时间</view>
			<view class="right-title">{{dataInfo.createTime}}</view>
		</view>

		<view v-if="dataInfo.repairStatus==4||dataInfo.repairStatus==9">
			<view class="detail-title2">
				关闭维修
			</view>
			<view class="gz-desc">
				<view class="title">关闭维修原因：</view>
				<view class="desc-reason2">{{dataInfo.closeReason}}</view>
			</view>
			<view class="gz-icon1 padding7">
				<view class="title">相关照片</view>
				<view class="icon-list">
					<image @tap="previewImage(v,closeImgList)" v-for="v in closeImgList" :src="v"></image>
					<video v-for="v in closeVideoList" :src="v"></video>
				</view>
			</view>
			<view class="detail-title detail-title-border">
				<view class="left-title">提交人</view>
				<view class="right-title">{{dataInfo.repairUserName}}</view>
			</view>
			<view class="detail-title detail-title-border">
				<view class="left-title">提交时间</view>
				<view class="right-title">{{dataInfo.closeTime}}</view>
			</view>
		</view>

		<view>
			<view>

				<view v-if="dataInfo.repairStatus!=1">
					<view class="detail-title2">
						故障信息
					</view>
					<view class="detail-title detail-title-border">
						<view class="left-title">故障等级</view>
						<view class="right-title">{{dataInfo.failureLevel}}</view>
					</view>
					<view class="detail-title detail-title-border">
						<view class="left-title">故障类型</view>
						<view class="right-title">{{dataInfo.failureCategory}}</view>
					</view>
					<view class="gz-desc detail-title-border">
						<view class="title">维修现象</view>
						<view class="desc-reason2">{{dataInfo.failurePhenomenon}}</view>
					</view>
					<view class="gz-desc">
						<view class="title">解决方案</view>
						<view class="desc-reason2">{{dataInfo.solution}}</view>
					</view>
					<view class="top-title defalut-bg padding6">
						<view class="left-title">维修信息</view>
						<view class="right-title" style="font-size: 28rpx;color: #666666;">
							维修工单号：{{dataInfo.repairOrderNum}}
						</view>
					</view>
					<view class="detail-title detail-title-border">
						<view class="left-title">维修类型</view>
						<view class="right-title">{{dataInfo.repairType==1?'内部维修':dataInfo.repairType==2?'委外维修':''}}
						</view>
					</view>
					<view class="gz-desc detail-title-border">
						<view class="title">维修内容</view>
						<view class="desc-reason2">{{dataInfo.content}}</view>
					</view>
					<view class="gz-icon1 padding7" v-if="dataInfo.repairPictures">
						<view class="title">维修照片</view>
						<view class="icon-list">
							<image @tap="previewImage(v,repairImgList)" v-for="v in repairImgList" :src="v"></image>
							<video v-for="v in repairVideoList" :src="v"></video>
						</view>
					</view>
				</view>

				<view class="detail-title3" v-if="dataInfo.partList&&dataInfo.partList.length>0">
					维修备件列表
				</view>
				<view class="list-wrapper">
					<view class="list-item detail-title-border" v-for="(item,index) in dataInfo.partList" :key="index">
						<view class="detail-title-border" style="display: flex;padding: 0 0 32rpx 0;">
							<view class="left-icon">
								<image
									:src="item.partPicture?item.partPicture:'../../../static/images/index/weibaorenwu.png'">
									<!-- </image> -->
							</view>
							<view class="right-txt">
								<view class="txt-all">
									<view class="txt1">{{item.partNum?item.partNum+'-':''}}{{item.partName}}</view>
									<view class="txt-status"
										:class="[item.approveStatus==0?'txt-status':item.approveStatus==1?'txt-status2':item.approveStatus==3?'txt-status3':item.approveStatus==2?'txt-status4':'']">
										{{item.approveStatus==0?'待提交':item.approveStatus==1?'待审核':item.approveStatus==3?'审核通过':item.approveStatus==2?'审核不通过':''}}
									</view>
								</view>

								<view class="txt3">
									<view style="width:200rpx;">{{item.partTypeName}}</view>
									<view style="width:200rpx; margin-left: 20rpx;text-align: right;">
										{{dataInfo.repairStatus != 1 && dataInfo.repairStatus != 2 ? '使用数量：' : '申请数量：'}}{{item.totalAmount}}
									</view>
								</view>

							</view>
						</view>

						<view class="iconfont icon-app-gantanhao"
							style="color: #FC770A;font-size: 30rpx;padding-top: 24rpx;" v-if="item.reason">
							<text style="color: #8C8C8C;margin-left: 5px;">原因：</text>
							<view
								style="padding-top: 10rpx;color: #8C8C8C;word-wrap: break-word;word-break: break-all;">
								{{item.reason}}
							</view>
						</view>
					</view>

				</view>


				<view class="" v-if="dataInfo.repairStatus!=1&&dataInfo.repairStatus!=2">
					<view class="" v-if="dataInfo.repairType==2">
						<view class="detail-title white-bg detail-title-border">
							<view class="left-title">维修厂家</view>
							<view class="right-title">{{dataInfo.repairFactory}}</view>
						</view>
						<view class="detail-title white-bg detail-title-border">
							<view class="left-title">外部维修费用</view>
							<view class="right-title">{{dataInfo.outsourceFee?dataInfo.outsourceFee:0}}元</view>
						</view>
						<view class="detail-title white-bg detail-title-border">
							<view class="left-title">内部维修费用</view>
							<view class="right-title">{{dataInfo.repairFee?dataInfo.repairFee:0}}元</view>
						</view>
					</view>
					<view class="detail-title white-bg detail-title-border">
						<view class="left-title">维修总费用</view>
						<view class="right-title">{{getTotalPrice(dataInfo.repairFee,dataInfo.outsourceFee)}}</view>
					</view>

					<view class="detail-title white-bg detail-title-border">
						<view class="left-title">维修人</view>
						<view class="right-title">{{dataInfo.repairUserName}}</view>
					</view>
					<view class="detail-title-colum detail-title-border">
						<view class="left-title">维修时间</view>
						<view class="right-title text-right">
							{{dataInfo.startTime!=''?dataInfo.startTime:''}}{{(dataInfo.startTime!=''&&dataInfo.endTime!='')?'至':''}}{{dataInfo.endTime}}
						</view>
					</view>
				</view>


				<view class="detail-title-colum" v-if="dataInfo.repairStatus>=3">
					<view class="left-title width4">维修验证提交时间</view>
					<view class="right-title text-right">
						{{dataInfo.verifySubmitTime?dataInfo.verifySubmitTime:''}}
					</view>
				</view>
				<view class="detail-title3" v-if="fileList2.length>0">
					附件
				</view>
				<view class="bx-upload">
					<view v-for="(item,index) in fileList2" :key="index">
						<view class="tab-list">
							<view class="tab-left">
								<image src="../../../static/images/beijian/wenjian.png"></image>
							</view>
							<view class="tab-right">
								<view class="data-txt">
									<view class="txt1">{{item.label}}</view>
									<view class="txt2">{{item.time}}</view>
								</view>
								<view style="color: #0F53AC;width: 80rpx;text-align: center;"
									@click="getNewFileUrl(item.url,item.label)">
									查看
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view
				v-if="(dataInfo.repairStatus!=1&&dataInfo.repairStatus==2&&dataInfo.verifyStatus==2)||(dataInfo.repairStatus!=1&&dataInfo.repairStatus!=2)">
				<view class="detail-title2">
					验证信息
				</view>
				<view class="detail-title detail-title-border">
					<view class="left-title">验证结果</view>
					<view class="right-title">
						{{dataInfo.verifyStatus===0?'待验证':dataInfo.verifyStatus==1?'通过':dataInfo.verifyStatus==2?'不通过':''}}
					</view>
				</view>
				<view class="detail-title detail-title-border" v-if="dataInfo.verifyStatus==2">
					<view class="left-title">原因</view>
					<view class="right-title">{{dataInfo.verifyReason}}</view>
				</view>
				<view class="detail-title detail-title-border">
					<view class="left-title">验证人</view>
					<view class="right-title">{{dataInfo.verifyUserName}}</view>
				</view>
				<view class="detail-title detail-title-border"
					v-if="dataInfo.repairStatus!=3&&dataInfo.repairStatus!=4">
					<view class="left-title">验收时间</view>
					<view class="right-title text-right">{{dataInfo.verifyTime}}</view>
				</view>
			</view>
		</view>
		<template v-if="showBtn">
			<view class="bottom-subside2"></view>
			<view class="btn-bottom" v-if="(dataInfo.repairStatus==1||dataInfo.repairStatus==2)&&!look&&type!='repair'">
				<view v-if="dataInfo.closeRepairShowFlag==1" class="btn-left" @click="togoCloseChange(dataInfo.id)">关闭维修
				</view>
				<view v-if="dataInfo.repairStatus==1&&dataInfo.beginRepairShowFlag==1" class="btn-right"
					@click="togoStartChange(dataInfo,2)">开始维修</view>
				<view v-if="dataInfo.repairStatus==2&&dataInfo.continueRepairShowFlag==1" class="btn-right"
					@click="togoStartChange(dataInfo,1)">继续维修</view>
			</view>
		</template>

		<u-loading-page :loading="loading"></u-loading-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileList2: [],
				repairOrderNum: '', //维修工单号
				dataInfo: {},
				repairId: '',
				imgList: [], //图片列表
				videoList: [], //视频列表
				loading: false,
				repairImgList: [], //维修照片列表
				repairVideoList: [], //维修视频列表，
				look: false,
				closeImgList: [],
				closeVideoList: [],
				type: '',
				showBtn: true
			}
		},
		onLoad(options) {
			if (options) {
				this.repairOrderNum = options.orderNum;
				if (options.orderNum && !options.repairId) {
					this.look = true
				}
				if (options.isNoBtn) {
					this.showBtn = false
				}
				this.repairId = options.repairId;
				this.type = options.type
			}
			this.getlistInfo()

		},
		methods: {
			//预览图片
			previewImage: function(e, s) {
				uni.previewImage({
					current: e,
					urls: s,
				});
			},
			getTotalPrice(t1, t2) {
				let t = '0'
				if (t1 || t2) {
					t = t1 + t2
				} else {
					t = '0'
				}
				return t + '元'
			},
			//处理判断是图片还是video
			handleFileList(data) {
				let failurePictures = data.failurePictures
				let repairPictures = data.repairPictures
				let closePictures = data.closePictures
				if (failurePictures) {
					let fileList = failurePictures.split(",")
					fileList.forEach(item => {
						let str = item.split('?')[0]
						if (str.substring(str.length - 3, str.length) == 'mp4') {
							this.videoList.push(item)
						} else {
							this.imgList.push(item)
						}
					})
				}
				if (repairPictures) {
					let fileList = repairPictures.split(",")
					fileList.forEach(item => {
						let str = item.split('?')[0]
						if (str.substring(str.length - 3, str.length) == 'mp4') {
							this.repairVideoList.push(item)
						} else {
							this.repairImgList.push(item)
						}
					})
				}
				if (closePictures) {
					let fileList = closePictures.split(",")
					fileList.forEach(item => {
						let str = item.split('?')[0]
						if (str.substring(str.length - 3, str.length) == 'mp4') {
							this.closeVideoList.push(item)
						} else {
							this.closeImgList.push(item)
						}
					})
				}

			},
			getlistInfo() {
				uni.$u.http.get(`/device/mobile/deviceRepair/repairDetailByOrderNum/${this.repairOrderNum}`).then(res => {
					if (res.code == 0) {
						this.dataInfo = res.data;
						this.handleFileList(res.data)
						if (res.data.fileNames) {
							this.handleAnnex(res.data.fileNames, res.data.fileUrls, res.data.fileSizes)
						}
					}
				}).catch(err => {})
			},
			//取消维修
			togoCloseChange(id) {
				uni.navigateTo({
					url: '/pages/subPackagesA/repairList/closerepair?repairId=' + id
				})
			},
			//开始维修
			togoStartChange(item, type) {
				this.loading = true
				// type 2-开始维修 1-继续维修
				if (type == 2) {
					uni.$u.http.post(`/device/mobile/deviceRepair/beginRepair/${this.repairId}`).then(res => {
						if (res.code == 0) {
							uni.navigateTo({
								url: '/pages/subPackagesA/repairList/repairinfo?deviceId=' + item
									.deviceId + '&orderNum=' + this.repairOrderNum + '&repairId=' + this
									.repairId + '&deviceType=' + item.deviceType
							})
						}
						this.loading = false
					}).catch(err => {
						this.loading = false
					})
				} else {
					this.loading = false
					uni.navigateTo({
						url: '/pages/subPackagesA/repairList/repairinfo?deviceId=' + item.deviceId + '&orderNum=' +
							this.repairOrderNum + '&repairId=' + this.repairId + '&deviceType=' + item.deviceType
					})
				}

			},
			getpictureList(pictureinfo) {
				if (pictureinfo) {
					var splitAdd = pictureinfo.split(",");
					return splitAdd
				} else {
					return []
				}
			},
			//处理附件数据
			handleAnnex(name, url, size) {
				let nameArr = name.split(',')
				let urlArr = url.split(',')
				let sizeArr = size.split(',')
				if (urlArr && urlArr[0] != "") {
					for (let i = 0; i < nameArr.length; i++) {
						let obj = {
							label: nameArr[i],
							url: urlArr[i],
							size: sizeArr[i]
						}
						this.fileList2.push(obj)
					}
				}
			},
			getNewFileUrl(fileUrl, fileName) {
				uni.$u.http.get(`/base/upload/bindFileUrlByFileName?fileUrl=${fileUrl}&fileName=${fileName}`).then(res => {
					this.lookAnnex(res.data, fileName)
				})
			},
			//查看附件
			lookAnnex(fileUrl, fileName) {

				let that = this
				uni.downloadFile({
					url: fileUrl, //下载地址，后端接口获取的链接
					filePath: wx.env.USER_DATA_PATH + '/' + fileName,
					success: (data) => {
						if (data.statusCode === 200) {
							//预览
							var filePath = data.filePath;
							// let str = data.filePath.split(".")[1]
							// if (fileType.filter(item => item == str).length > 0) {
							uni.openDocument({
								filePath: filePath,
								showMenu: true,
								success: function(res) {}
							});
							// } else {
							// 	uni.showToast({
							// 		icon: 'none',
							// 		mask: true,
							// 		title: `暂不支持预览${str}类型文件`,
							// 	});
							// }
						}
					},
					fail: (err) => {
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '失败请重新下载',
						});
					},
				});
			},
		}
	}
</script>

<style lang="scss">
	.list-wrapper {
		// padding-bottom: 30rpx;
		// border-bottom: 1px solid #f2f2f2;

		.list-item {
			// display: flex;
			padding: 32rpx;
			background: #fff;
			border-radius: 4px;

			.left-icon {
				border-radius: 8rpx;

				image {
					width: 152rpx;
					height: 152rpx;

				}
			}

			.right-txt {
				padding-left: 24rpx;
				width: 100%;
				display: grid;

				.txt-all {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;

					.txt1 {
						font-size: 32rpx;
						color: #2B2B2B;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						width: 350rpx;
						display: flex;
						justify-content: space-between;
						flex-flow: column;
					}

					.txt2 {
						color: #8c8c8c;
						font-size: 28rpx;
						margin: 10rpx 0;
					}

					.txt-status {
						font-size: 24rpx;
						color: #0F53AC;
						background-color: rgba(15, 83, 172, 0.2);
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 10rpx;
						border-radius: 4px;
					}

					.txt-status2 {
						color: #FC770A;
						background-color: rgba(252, 119, 10, 0.2);
					}

					.txt-status3 {
						color: #02AD82;
						background-color: rgba(2, 173, 130, 0.2);
					}

					.txt-status4 {
						color: #FF4D4D;
						background-color: rgba(255, 77, 77, 0.2);
					}
				}

				.txt3 {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					margin: 10rpx 0;
					color: #8c8c8c;
					font-size: 28rpx;
				}

			}
		}
	}

	.gz-icon1 {
		padding: 30rpx;
		border-bottom: 1px solid #f2f2f2;

		.title {
			font-size: 32rpx;
			color: #666666;
		}

		.icon-list {
			display: grid;
			grid-gap: 12rpx;
			grid-template-columns: repeat(3, 218rpx);
			padding-top: 20rpx;

			image {
				width: 218rpx;
				height: 218rpx;

			}

			video {
				width: 218rpx;
				height: 218rpx;
			}
		}
	}

	.list-item :last-child {
		border-bottom: none;
	}

	.detail-title-colum {
		display: flex;
		justify-content: space-between;
		// flex-direction: column;
		padding: 20rpx 30rpx;
		font-size: 32rpx;

		.left-title {
			width: 30%;
			color: #666666;
		}

		.right-title {
			// word-wrap: break-word;
			width: 46%;
			color: #2b2b2b;
			font-size: 32rpx !important;
		}

		.text-right {
			text-align: right;
		}
	}

	.bx-upload {
		padding: 20rpx 30rpx;
		background: #fff;

		.tab-list {
			display: flex;
			padding: 24rpx 0 24rpx 20rpx;
			border-radius: 8rpx;
			background: #f2f2f2;
			margin-top: 20rpx;

			.tab-left {
				border-radius: 8rpx;
				display: flex;
				align-items: center;

				image {
					width: 96rpx;
					height: 96rpx;
					border-radius: 8rpx;
				}

				.iconfontsize {
					font-size: 40rpx;
					color: #0F53AC;
				}
			}

			.tab-right {
				width: 100%;
				padding: 0 32rpx 0 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.data-txt {
					flex: 1;

					.txt1 {
						// width: 550rpx;
						font-size: 28rpx;
						color: #2B2B2B;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						word-wrap: break-word;
						word-break: break-all;
					}

					.txt2 {
						font-size: 28rpx;
						color: #8c8c8c;
						margin-top: 10rpx;
					}

					.txt3 {
						color: #A6A6A6;
						font-size: 28rpx;
						margin-top: 8rpx;
					}
				}
			}

		}
	}

	.status {
		// margin-top: 20rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		border-radius: 8rpx;
		font-size: 24rpx;
		padding: 0 20rpx;
	}

	.title-ongoing {
		color: rgba(2, 173, 130, 1);
		background: rgba(2, 173, 130, 0.2);
	}

	.title-dyz {
		color: rgba(15, 83, 172, 1);
		background-color: rgba(15, 83, 172, 0.2);
	}

	.title-close {
		color: rgba(237, 118, 21, 1);
		background-color: rgba(252, 119, 10, 0.2);
	}

	.title-finish {
		color: rgba(2, 173, 130, 1);
		background-color: rgba(2, 173, 130, 0.2);
	}

	.gz-desc {
		// padding: 14px 0;

		.title {
			font-size: 32rpx;
			color: #666666;
		}

		.desc-reason2 {
			font-size: 32rpx;
			color: #2b2b2b;
			margin-top: 15rpx;
			word-wrap: break-word;
			// overflow: hidden;
			// text-overflow: ellipsis;
			// display: -webkit-box;
			// -webkit-line-clamp: 2;
			// -webkit-box-orient: vertical;
		}
	}

	// .btn-bottom {
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: space-around;
	// 	font-size: 34rpx;
	// 	margin: 24rpx 0;

	// 	.btn-left {
	// 		color: #0F53AC;
	// 		border-radius: 12rpx;
	// 		border: 1px solid #0F53AC;
	// 		padding: 15rpx 100rpx;
	// 	}

	// 	.btn-right {
	// 		color: #ffffff;
	// 		background: #0F53AC;
	// 		border-radius: 12rpx;
	// 		padding: 15rpx 100rpx;
	// 	}
	// }

	.videoList {
		width: 105px;
		height: 105px;
		margin-right: 6px;
	}

	.list-wrapper2 {
		// padding-bottom: 30rpx;

		.list-item {
			display: flex;
			align-items: center;
			padding: 20rpx;
			background: #fff;
			border-radius: 4px;
			padding: 32rpx;
			border-bottom: 1px solid #f2f2f2;

			.left-icon {
				border-radius: 8rpx;

				image {
					width: 152rpx;
					height: 152rpx;

				}
			}

			.right-txt {
				display: flex;
				flex-flow: column;
				justify-content: space-between;
				padding-left: 32rpx;
				height: 152rpx;

				.txt1 {
					font-size: 16px;
					font-weight: 400;
					color: #2B2B2B;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;

				}

				.txt-status {
					font-size: 24rpx;
					color: #0F53AC;
					background-color: rgba(15, 83, 172, 0.2);
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 10rpx;
					border-radius: 4px;
				}

				.txt2 {
					color: #8c8c8c;
					font-size: 28rpx;
					margin: 10rpx 0;
				}

				.txt3 {
					font-size: 14px;
					font-weight: 400;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 10rpx 0;
					color: #A6A6A6;
					font-size: 28rpx;
					width: 500rpx;
				}
			}
		}

	}
</style>
